<template>
  <div>
    <div>
      <span class="txtStyle">用户名：</span>
      <el-input
          size='small'
          v-model="input"
          placeholder="请输入设备名称"
          clearable
          maxlength="64"
          style="width:15%"
          show-word-limit
      ></el-input>
      <el-button
          class="buttonStyle"
          style="margin-left: 20px"
          @click="search_btn()"
      >查询</el-button>
    </div>
    <div>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  inject:['reload'],
  data() {
    return {
      tableData: [{
        id:"1111111111111",
        date: '2010-05-02',
        name: '赵小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id:"22222222222222",
        date: '2011-05-04',
        name: '钱小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id:"333333333",
        date: '2012-05-01',
        name: '孙小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id:"4444444444444444",
        date: '2013-05-03',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        id:"555555555555",
        date: '2014-05-04',
        name: '周小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id:"66666666666666",
        date: '2015-05-01',
        name: '武小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id:"7777777777777",
        date: '2016-05-04',
        name: '郑小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id:"888888888888",
        date: '2017-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }],
      input: "", //搜索
    }
  },
  methods:{
    indexMethod(index) {
      return index + 1;
    },
    search_btn() {
      let search = this.input;
      if (search === "" || search == null) {
        this.reload()
      } else {
        this.tableData = this.tableData.filter(function(item) {
          // console.log("过滤", item);
          let searchField = { //这里把item里面所有字段写进去了
            date: item.date,
            name: item.name,
            address: item.address,
            id: item.id,
          };
          return Object.keys(searchField).some(function(key) {
            // console.log("key值", key);
            return (
                String(item[key])
                    .toLowerCase()
                    .indexOf(search) > -1
            );
          });
        });
      }
    },
  }
}
</script>

<style scoped>

</style>
